<template>
     <div class="fount-text">
        <el-container>
          <el-main style="margin-top: -25px;" class="main">
              <el-row :gutter="25">
                <el-col :span="16"><div class="grid-content bg-purple">
                    <div style="margin-left:20px;">
                        <!-- <el-button size="medium "  @click="adduserButton">增加</el-button> -->
                        <el-button size="medium "  @click="userleDelete">批量删除</el-button>
                        <el-button type="success" size="medium " slot="append" @click="download" plain>导出Excel</el-button>
                      </div>
                </div>

                <el-dialog
                title="新增/修改"
                :visible.sync="dialogVisible"
                width="35%"
                :before-close="handleClose">
                <el-form :label-position="left" :rules="rules" ref="form" :model="form" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="姓名" prop="name" style="width:80%;">
                      <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age" style="width:50%;">
                        <el-input v-model="form.age"></el-input>
                      </el-form-item>
                    <el-form-item label="性别" prop="sex">
                      <el-select v-model="form.sex"  placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email" style="width:80%;">
                        <el-input v-model="form.email"></el-input>
                      </el-form-item>
                      <el-form-item label="密码" prop = "password" style="width:80%;">
                        <el-input type="password" v-model="form.password"></el-input>
                      </el-form-item>
                    <el-form-item label="账号情况"  prop="statuscode" style="width:80%;">
                      <el-radio-group v-model="form.statuscode" >
                        <el-radio label="正常"></el-radio>
                        <el-radio label="异常"></el-radio>
                      </el-radio-group>

                    </el-form-item>
                    <el-form-item label="备注" prop="dsc" style="margin-bottom: 10px;">
                      <el-input type="textarea" v-model="form.dsc"></el-input>
                    </el-form-item>
                  </el-form>
                <span slot="footer" class="dialog-footer" v-if="title==1">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="adduser">确 定</el-button>
                </span>
                <span slot="footer" class="dialog-footer" v-else>
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateuser">确 定</el-button>
                </span>


              </el-dialog>
            
            </el-col>

                <!-- <el-col :span="8"><div class="grid-content bg-purple">
                    <el-input v-model="input" placeholder="请输入昵称或邮箱..." style="width:60%;"></el-input>
                    <el-button size="small " icon="el-icon-search" style="height:40px;">搜索</el-button>
                </div></el-col> -->
              </el-row>

              <el-row  :gutter="25">
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <el-table
                    :data="tableData"
                    style="width: 100%;"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>

                    <el-table-column
                        prop="name"
                        label="昵称"
                        width="90">
                    </el-table-column>
                    
                    <el-table-column
                        prop="sex"
                        label="性别"
                        width="90">
                    </el-table-column>

                    <el-table-column
                    prop="age"
                    label="年龄"
                    width="90">
                </el-table-column>

                    <el-table-column
                      label="注册时间"
                      width="220">
                      <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                      </template>
                    </el-table-column>

                    
                    <el-table-column
                    label="email"
                    width="240">
                    <template slot-scope="scope">
                      <i class="el-icon-message"></i>
                      <span style="margin-left: 10px">{{ scope.row.email }}</span>
                    </template>
                  </el-table-column>
                    <el-table-column
                      label="姓名"
                      width="120">
                      <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                          <p>姓名: {{ scope.row.name }}</p>
                          <p>备注: {{ scope.row.dsc }}</p>
                          <div slot="reference" class="name-wrapper">{{ scope.row.name }}
                            <!-- <el-tag size="medium">{{ scope.row.name }}</el-tag> -->
                          </div>
                        </el-popover>
                      </template>
                    </el-table-column>

                    <el-table-column
                    prop="statuscode "
                    label="账号情况"
                    width="120">
                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.statuscode== 1 ? 'primary' : 'danger'"
                        disable-transitions>{{scope.row.statuscode == 1 ? '正常':'异常'}}</el-tag>
                    </template>
                </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                          size="mini"
                          type="danger"
                          @click="open(scope.$index, scope.row.id)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="pagination" style="padding: 28px;margin-left: 35%;">
                    <el-pagination
                    background
                    layout="prev, pager, next"

                    :total="this.total"
                    @current-change="pagers"
                    > </el-pagination>
                </div>
            </el-col>
            </el-row>

            

          </el-main>

        </el-container>
      </div>
</template>
<script>
export default {
  data() {
    return {
    dialogVisible: false,
    rules: {
    name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 6, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
    age:[
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值'}
        ],
    email:[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] 
        }],
    name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 6, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
    password:[
            {required: true, message: '请输入密码', trigger: 'blur' },
            {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
    ],


        },

     form: {
          name: '',
          age: '',
          sex:'男',
          password:'',
          desc: '',
          statuscode:'',
          email:'',
          dsc:'',
        },
      i:0,
      input: '',
      istableData:[null],
      tableData: [],
      multipleSelection: [],
      ids:{
        menusid:[]
      },
      title:1,
      total:0,
      params: {
        page: 1,
        size: 6,
      },
    useremail:'',
    vals:1,

  }
},
    mounted:function(){
     this.loadexecution();
    },


    methods: {


      success(msg)
      {
        this.$message({
            type: 'success',
            message: msg,
          });
      },

    cancel(msg){
      
      this.$message({
            type: 'info',
            message: msg
          });   
    }, 

     async download() { // 导出
          const {data:res} = await this.$http.post('easy/getUserExcel')
          if(res.success==true){
          this.success("导出成功!请在桌面查看。。。")
      }else{
        this.cancel("导出失败!请关闭文件重试!")
      }
      },


      //分页数据
      async pagers(val){
        this.vals = val
        const {data:res} = await this.$http.post('user/PageHelper',this.$qs.stringify({"page":val,"pagesize":10}))
        if(res.success==true){
          this.tableData = res.result.list
          this.total = res.result.pageTotal*10
      }
      },



      adduserButton(){
        this.title = 1;
        this.dialogVisible = true;
      },


      handleEdit(index, row) {
        this.dialogVisible = true;
        this.title = 0;
        this.form = JSON.parse(JSON.stringify(row));
        if( this.form.statuscode == 1)
        {
          this.form.statuscode = "正常"
        }else{
          this.form.statuscode = "异常"
        }
      },


      handleDelete(index, row) {
        open();
        console.log(index, row);
      },  


    handleSelectionChange(val) {

        this.multipleSelection = val;
        
      },


   //修改数据
    async updateuser(){
      const {data:res} = await this.$http.post('user/UpdateUser',this.$qs.stringify(this.form))
      if(res.success==true){
        this.pagers(this.vals)
        this.success("修改成功!")
        this.dialogVisible = false;
   
      }else{
        this.cancel("修改失败!")
      }       
      },

      open2(msg) {
        this.$message({
          message: msg,
          type: 'success'
        });
      },

    //批量删除数据
    async userleDelete()
    {
      if(this.multipleSelection.length<=0)
      {
        this.$message('请至少选择一条数据!');
        return;
      }
      var ids = this.multipleSelection[0].id+","
      for(var i=1;i<this.multipleSelection.length;i++)
      {
        ids = ids+this.multipleSelection[i].id+","
      }
       const {data:res} = await this.$http.post('user/DataleUsres',this.$qs.stringify({"menusid":ids}))
       if(res.success==true){
        this.open2("删除成功!") 
        this.pagers(this.vals)
      }
      },



      //指定id删除数据
      open(index, id) {

        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        this.DateUser(id,index);
        
        }).catch(() => {
        
          this.cancel('已取消删除!')

        });
      },


    
   //加载页面时查询数据
   async loadexecution(){

    this.useremail = JSON.parse(localStorage.getItem('email'))
    if(this.useremail==' '|| this.useremail==null || this.useremail=="")
    {
      this.cancel('登录异常!')
      this.$router.push({path: '/adlogin'});
    }
      var that = this;
      const {data:res} = await this.$http.post('user/PageHelper',this.$qs.stringify({"page":1,"pagesize":10}))
      if(res.success==true){
          this.tableData = res.result.list
          this.total = res.result.pageTotal*10
      }
    },




    //添加数据
    async adduser(){
    console.log(this.form)
    var that = this;
    const {data:res} = await this.$http.post('user/sigunpPage',this.$qs.stringify(this.form));
    if(res.success==true){
      this.success("添加成功!")
      this.dialogVisible = false
      this.pagers(this.vals)
    }else{
      this.cancel("添加失败!")
    }
    },


  
    //删除数据
   async DateUser(id,index){

    const {data:res} = await this.$http.post('user/DataleUsre',this.$qs.stringify({'id':id}));
    if(res.success==true){
       this.success("删除成功!")
       this.tableData.splice(index, 1)
    }else{
      this.cancel("删除失败!")
    }
  },
}
}
</script>
<style>
.el-row {
    margin-bottom: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #ffff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #fff;
  }
.fount-text
{
  font-size: 15px;
}
</style>